<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <style>
      ul,li{
        list-style: none;
      }
      .wrap{
        width: 500px;
        height: 600px;
      }
      .list{
        height: 100%;
        width: 100%;
        display: grid;
        /* grid-auto-rows: 10px; */
        grid-template-columns: repeat(5,1fr);
        column-gap: 20px;
      }
      .item{
        width: 100%;
        /* height: 100%; */
        /* background: lightcoral; */
      }
      .item1{
        background: linear-gradient(to bottom, transparent 55%, #37c 0);
      }
      .item2{
        background: linear-gradient(to bottom, transparent 10%, #37c 0);
      }
      .item3{
        background: linear-gradient(to bottom, transparent 29%, #37c 0);
      }
      .item4{
        background: linear-gradient(to bottom, transparent 69%, #37c 0);
      }
      .item5{
        background: linear-gradient(to bottom, transparent 19%, #37c 0);
      }
    </style> -->
  
    <link rel="stylesheet" href="bing.css">
  </head>
  <body>
    <div class="wrap">
      <ul class="list">
        <li class="item item1"></li>
        <li class="item item2"></li>
        <li class="item item3"></li>
        <li class="item item4"></li>
        <li class="item item5"></li>
      </ul>
    </div>
  </body>
</html>
